<template>
  <div class="mask" v-if="showCart&&number>0"></div>
  <div class="cart-list" v-if="showCart&&number>0">
    <div class="cart-header">
      <div v-if="allChecked" class="cart-icon iconfont" @click="changeCartState(shopId)">
        &#xe624;
      </div>
      <div v-if="!allChecked" class="cart-icon cart-icon-unchecked iconfont" @click="changeCartState(shopId)">
        &#xe624;
      </div>
      全选
      <div class="clear-cart" @click="clearCart(shopId)">清空购物车</div>
    </div>
    <div class="product-info" v-for="item in list" :key="item._id">
      <div v-if="item.checked" class="cart-icon iconfont" @click="changeCartItemState(shopId,item._id,false)">
        &#xe624;
      </div>
      <div v-if="!item.checked" class="cart-icon cart-icon-unchecked iconfont"
           @click="changeCartItemState(shopId,item._id,true)">
        &#xe624;
      </div>
      <img :src="item.imgUrl" alt="" class="product-pic">
      <div class="product-intro">
        <p class="product-name">{{ item.name }}</p>
        <div class="price-info"><span class="discount-price">￥{{ item.price }}</span>
          <span class="price">${{ item.oldPrice }}</span></div>
      </div>
      <div class="product-number">
        <span class="minus" @click="()=>{changeCartItem(shopId,shopName,item._id,item,-1)}">-</span>
        <span class="number">
          {{ item.count || 0 }}
          </span>
        <span class="plus" @click="()=>{changeCartItem(shopId,shopName,item._id,item,1)}">+</span>
      </div>
    </div>

  </div>
  <div class="cart">

    <div class="cart-icon" @click="changShowCart">
      <em class="iconfont">&#xe63f;</em>
      <div class="product-number">{{ number }}</div>
    </div>
    <p class="total-amount">
      <span class="amount-text">总计:</span><em class="amount">￥{{ price }}</em>
    </p>
    <router-link :to="{path:`/orderConfirmation/${shopId}`}">
      <button class="check">去结算</button>
    </router-link>
  </div>
</template>

<script>
import { useRoute } from 'vue-router'
import { computed, ref } from 'vue'
import { useCommonCartEffect } from '@/views/shop/commonCartEffect'
import { useStore } from 'vuex'

const useCartEffect = (shopId) => {
  const {
    changeCartItem,
    changeCartItemState,
    changeCartState,
    clearCart
  } = useCommonCartEffect()

  const store = useStore()
  const cartList = store.state.cartList || {}
  const number = computed(() => {
    const productList = cartList[shopId]?.productList || []
    let count = 0
    if (productList) {
      for (const i in productList) {
        const product = productList[i]
        count += product.count
      }
    }
    return count
  })
  const price = computed(() => {
    const productList = cartList[shopId]?.productList || []
    let price = 0
    if (productList) {
      for (const i in productList) {
        const product = productList[i]
        if (product.checked) {
          price += product.price * product.count
        }
      }
    }
    return price.toFixed(2)
  })
  const allChecked = computed(() => {
    const productList = cartList[shopId]?.productList || []
    let checked = true
    if (productList) {
      for (const i in productList) {
        const product = productList[i]
        if (!product.checked) {
          checked = false
        }
      }
    }
    return checked
  })

  const list = computed(() => {
    return cartList[shopId]?.productList || []
  })
  return {
    number,
    price,
    list,
    changeCartItem,
    changeCartItemState,
    changeCartState,
    allChecked,
    clearCart
  }
}
const useShowCartEffect = () => {
  const showCart = ref(false)
  const changShowCart = () => {
    showCart.value = !showCart.value
  }
  return {
    showCart,
    changShowCart
  }
}
export default {
  name: 'Cart',
  props: ['shopName'],
  setup () {
    const route = useRoute()
    const shopId = route.params.id
    const {
      number,
      price,
      list,
      changeCartItem,
      changeCartItemState,
      changeCartState,
      allChecked,
      clearCart
    } = useCartEffect(shopId)
    const {
      showCart,
      changShowCart
    } = useShowCartEffect()
    return {
      showCart,
      shopId,
      number,
      price,
      list,
      changeCartItem,
      changeCartItemState,
      changeCartState,
      allChecked,
      clearCart,
      changShowCart
    }
  }
}
</script>

<style lang="scss" scoped>
.cart-list {
  position: absolute;
  left: 0;
  right: 0;
  bottom: .49rem;
  background-color: #FFFFFF;

  .cart-header {
    height: .52rem;
    display: flex;
    align-items: center;
    vertical-align: center;

    font-size: .14rem;
    color: #333333;
    line-height: .16rem;
    border-bottom: .01rem solid #F1F1F1;

    .cart-icon {
      height: .2rem;
      width: .2rem;
      line-height: .2rem;
      color: #0091FF;
      font-size: .2rem;
      margin: 0 .12rem 0 .23rem;

      &-unchecked {
        color: #bfbfbf;
      }
    }

    .all {

    }

    .clear-cart {
      flex: 1;
      text-align: right;
      margin-right: .18rem;
    }
  }

  .product-info {
    display: flex;
    height: .46rem;
    padding: .12rem 0 .16rem 0;
    position: relative;
    z-index: 999;

    .cart-icon {
      height: .2rem;
      width: .2rem;
      line-height: .2rem;
      color: #0091FF;
      font-size: .2rem;
      margin: .15rem .2rem 0 .22rem;

      &-unchecked {
        color: #bfbfbf;
      }
    }

    .product-pic {
      width: .46rem;
      height: .46rem;
      margin-right: .16rem;
    }

    .product-intro {
      flex: 1;

      .product-name {
        font-size: .14rem;
        color: #333333;
        font-weight: bold;
        margin: 0.06rem 0 .06rem 0;
      }

      .price-info {
        line-height: 20px;

        .discount-price {
          display: inline-block;
          font-size: 14px;
          color: #E93B3B;
        }

        .price {
          margin-left: .06rem;
          display: inline-block;
          font-size: 10px;
          color: #999999;
          text-decoration: line-through;
        }

      }
    }

    .product-number {
      position: absolute;
      right: 0.31rem;
      bottom: 0.24rem;

      .minus, .plus {
        display: inline-block;
        width: .2rem;
        height: .2rem;
        border-radius: 50%;
      }

      .minus {
        width: .18rem;
        height: .18rem;
        border: .01rem solid #666666;
        font-size: .16rem;
        line-height: .16rem;
        text-align: center;
      }

      .number {
        margin: 0 .11rem;
        font-size: .14rem;
      }

      .plus {
        background-color: #0091FF;
        font-size: .18rem;
        line-height: .18rem;
        text-align: center;
        color: white;
      }
    }
  }

}

.cart {
  height: .49rem;
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  display: flex;
  vertical-align: center;
  align-items: center;
  background: #FFFFFF;
  box-shadow: 0 -1px 1px 0 #F1F1F1;

  .cart-icon {
    width: .28rem;
    height: .26rem;
    margin: 0 .36rem 0 .24rem;
    position: relative;

    .iconfont {
      font-size: .26rem;
      color: #4FB0F9;
    }

    .product-number {
      position: absolute;
      top: -0.05rem;
      right: -0.06rem;
      width: .2rem;
      height: .2rem;
      border-radius: 50%;
      background-color: #E93B3B;
      color: #FFFFFF;
      text-align: center;
      padding-top: .01rem;
      font-size: .1rem;
      line-height: .18rem;
      transform: scale(.5);
      box-sizing: border-box;
    }
  }

  .total-amount {
    font-size: .12rem;
    color: #333333;

    .amount-text {
      padding-right: .1rem;
    }

    .amount {
      font-size: .18rem;
      color: #E93B3B;
    }
  }

  .check {
    position: absolute;
    right: 0;
    bottom: 0;
    height: 100%;
    width: .98rem;
    background: #4FB0F9;
    font-size: .14rem;
    color: #FFFFFF;
    border: none;
  }

}

.mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.50);;
}

</style>
